<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
</head>

<style>
	
	
    div[id="backGround"]{
        position: absolute;
        top:0px;
        left:0%;
        height:800px;
        width:auto;
        z-index: -1;
    }
	
    body{
        font-family:"楷体";
        font-weight:bolder;
        font-size:18px;
        background-size: 100%;
        color:rgb(254, 254, 254);
        margin:5px;
    }

    div[id="blockLayout"] {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:-1;
        opacity:0.6;
    }

    table[id="tableLoadIn"]{
        width:350px;
        height:250px;
    }
    
    input[name="inputPassword"]{
        width: 200px;
        height:30px;
        border-radius: 10px;
        color:white;
        background-color: rgb(254, 254, 254,0);
        border-color: #000;
        vertical-align: middle;
    }
    input[name="inputUsername"]{
        width: 200px;
        height:30px;
        border-radius: 10px;
        color:white;
        background-color: rgb(254, 254, 254,0);
        border-color: #000;
        vertical-align: middle;
    }

    input[name="loadButtonSubmit"]{
        width:60px;
        height:35px;
        border-radius:10px;
        border-color: rgba(240, 248, 255, 0.5);
        background-color:rgba(167, 199, 244, 0);
        font-family: "楷体";
        font-size: 16px;
        font-weight: bold;
        color:rgb(255, 255, 255);
    }

    input[name="loadButtonReset"]{
        width:60px;
        height:35px;
        border-radius:10px;
        border-color: rgba(240, 248, 255, 0.5);
        background-color:rgba(167, 199, 244, 0);
        font-family: "楷体";
        font-size: 16px;
        font-weight: bold;
        color:rgb(255, 255, 255);
    }

    div[id="loadInTableDiv"]{
        width:350px;
        height:260px;
        margin-top: 10%;
        margin-left:36%;
        background-color:rgba(255, 255, 255, 0);
        border-radius: 15px;
        padding: 20px;
        z-index:999;
    }

    span{
        color:red;
    }

    img{
        width:30px;
        height:30px;
        opacity: 1;
    }
    
    a:link{
    	color:white;
    }

</style>

<body >
	 <div id="backGround">
        <video src="viedo/2.mp4" height="auto" width="1520px" autoplay="autoplay" muted="true" loop="loop" style="z-index:-99"></video>
    </div>
	<%
	request.setCharacterEncoding("UTF-8");
	String message=String.valueOf(request.getParameter("message"));
	if(message.contentEquals("注册成功，请登录")){
		%><script>alert("注册成功，请登录");</script><%
	}
	%>
	
    <div id="loadInTableDiv">
    <table id="tableLoadIn" border="0" cellspacing="0" >
  	<form id="formLoadIn" action="LoadInServlet" method="post">
        <tr aria-rowspan="2" align="center">
            <td colspan="2">
                <h1 style="font-family:fantasy;margin:5px;">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    BI &nbsp;&nbsp;SHOP</h1>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="signIn.jsp" target="_blank" style="text-decoration:none">注册</a>
            </td>
        </tr>
        <tr>
            <td align="right" width=120px>
                <label for="inputUsername">用户名：</label>
            </td>
            <td align="center">
                <input type="text" name="inputUsername" id="inputUsername">
            </td>
        </tr>
        <tr>
            <td></td>
            <td height="20" align="center">
                <span id="usernameSpan" style="display:none;">×用户名必须为2-12位</span>
            </td>
        </tr>
        <tr>
            <td align="right" width=100px>
                <label for="inputPassword">&nbsp;密码：
             </td>
            <td align="center">
                <input type="password" name="inputPassword" id="inputPassword">
            </td>
        </tr>

        <tr>
            <td></td>
            <td height="20" align="center">
                <span id="passwordSpan" style="display:none;">×密码必须大于6位</span>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <input name="loadButtonSubmit" type="submit" value="登录">&nbsp;&nbsp;&nbsp;&nbsp;
               <input type="reset" name="loadButtonReset" value="重置">
            </td>
        </tr>
    </form>
    </table>
    </div>

    <div id="blockLayout" style="display: none;"></div>

    <script>
    const str1=document.getElementById("inputUsername");
	const str2=document.getElementById("inputPassword");
	
    str1.onblur=checkusername;
	function checkusername(){
		const username=str1.value.trim();
        document.getElementById("blockLayout").style.display="none";
		if(username.length>=2 && username.length<=12){
			document.getElementById("usernameSpan").style.display='none';
			return true;
		}else if(username.length>0){
			document.getElementById("usernameSpan").style.display="";
			return false;
		}
	}

    str2.onblur=checkpassword;
	function checkpassword(){
		const username=str1.value.trim();
		const password=str2.value.trim();
        document.getElementById("blockLayout").style.display="none";
		if(password.length>=6){
			document.getElementById("passwordSpan").style.display='none';
			return true;
		}else if(username.length>0 || password.length>=6){
			document.getElementById("passwordSpan").style.display="";
			return false;
		}
	}

    const formLoadIn=document.getElementById("formLoadIn");
    formLoadIn.onsubmit=function(){
        const flag=checkusername() && checkpassword();
        if(flag){
            return true;
        }else{
            return false;
        }
    }

    str1.onfocus=function(){
        document.getElementById("blockLayout").style.display="";
    }
    str2.onfocus=function(){
        document.getElementById("blockLayout").style.display="";
    }

    </script>

</body>
</html>